import { ComponentModel } from '@TG/interface'
import { isNotEmpty } from '../validate'

/**
 * 构建表单项
 * @param prop 属性（用于绑定 model）
 * @param label 标题
 * @param items 输入组件集
 * @param template 构建模板
 */
export const buildFormItem = (prop: string, label: string, items: ComponentModel[], template?: ComponentModel) => {
  const item: ComponentModel = {}
  if (isNotEmpty(template)) {
    Object.assign(item, template)
  }
  item.props = Object.assign({ prop, label }, template?.props)
  item.items = items
  return item
}

/**
 * 构建输入组件
 * @param tag 标签
 * @param name 属性（用于绑定 model）
 * @param readonly 只读 [默认为 false]
 * @param linkage 可联动 [默认为 undefined]
 * @param template 构建模板
 */
export const buildInput = (
  tag: string,
  name?: string,
  readonly: boolean = false,
  linkage: boolean | undefined = undefined,
  template?: ComponentModel
) => {
  const item: ComponentModel = { tag }
  if (isNotEmpty(name)) {
    item.name = name
  }
  Object.assign(
    item,
    {
      props: { disabled: readonly },
      meta: { linkage }
    },
    template
  )
  return item
}

/**
 * 构建选项输入组件
 * @param options 选项集
 * @param valueField 值字段名
 * @param titleField 标题字段名
 * @param name 属性（用于绑定 model）
 * @param readonly 只读 [默认为 false]
 * @param linkage 可联动 [默认为 undefined]
 * @param template 构建模板
 */
export const buildInputOption = (
  options: any[],
  valueField: string,
  titleField: string,
  name?: string,
  readonly: boolean = false,
  linkage: boolean | undefined = undefined,
  template?: ComponentModel
) => {
  const items: ComponentModel[] = []
  if (isNotEmpty(options)) {
    if (options.length > 2) {
      // 选项大于 2 个默认构建 el-select
      const itemOptions: ComponentModel[] = []
      options.forEach(option => {
        const value = option[valueField]
        const title = option[titleField]
        const item: ComponentModel = {}
        item.tag = 'el-option'
        item.props = new Map<string, any>([
          ['label', title],
          ['value', value]
        ])
        itemOptions.push(item)
      })
      const itemSelect: ComponentModel = {}
      itemSelect.tag = 'el-select'
      if (isNotEmpty(name)) {
        itemSelect.name = name
      }
      Object.assign(
        itemSelect,
        {
          props: { disabled: readonly },
          meta: { linkage }
        },
        template
      )
      itemSelect.items = itemOptions
      items.push(itemSelect)
    } else {
      // 选项小于等于 2 个默认构建 el-radio
      options.forEach(option => {
        const value = option[valueField]
        const title = option[titleField]
        const item: ComponentModel = {}
        item.tag = 'el-radio'
        if (isNotEmpty(name)) {
          item.name = name
        }
        if (isNotEmpty(template)) {
          Object.assign(item, template)
        }
        item.text = title
        item.props = Object.assign({ label: value, disabled: readonly }, template?.props)
        item.meta = { linkage }
        items.push(item)
      })
    }
  }
  return items
}

/**
 * 设置表单输入组件的默认 props
 * @param items 输入组件集
 */
export const setDefaultProps = (...items: ComponentModel[]) => {
  if (isNotEmpty(items)) {
    items.forEach(item => {
      const tag = item.tag || ''
      const props = item.props || new Map<string, any>()
      const subItems = item.items || []
      const propsType: string = props.get('type')
      if (isNotEmpty(subItems)) {
        setDefaultProps(...subItems)
      }
      let defaultProps = { placeholder: '请输入 ...' }
      if (tag === 'el-input') {
        if (propsType === 'textarea') {
          defaultProps = Object.assign(defaultProps, { rows: 5 })
        }
      } else if (tag === 'el-input-number') {
        defaultProps = Object.assign(defaultProps, { controls: false, 'controls-position': 'right' })
      } else if (tag === 'el-radio') {
        defaultProps = Object.assign(defaultProps, { border: true })
      } else if (tag === 'el-select') {
        defaultProps = Object.assign(defaultProps, { placeholder: '请选择 ...' })
      } else if (tag === 'el-cascader') {
        defaultProps = Object.assign(defaultProps, { placeholder: '请选择 ...', 'expand-trigger': 'hover' })
      } else if (tag === 'el-date-picker') {
        let valueFormat = 'yyyy-MM-dd'
        if (propsType === 'datetime') {
          valueFormat = 'yyyy-MM-dd HH:mm:ss'
        } else if (propsType === 'year') {
          valueFormat = 'yyyy'
        } else if (propsType === 'month') {
          valueFormat = 'yyyy-MM'
        }
        defaultProps = Object.assign(defaultProps, { placeholder: '请选择 ...', 'value-format': valueFormat })
      }
      item.props = Object.assign({}, defaultProps, props)
    })
  }
}
